import React, { useState, useEffect } from 'react';
import {
  Space,
  Switch,
  Table,
  Button,
  Input,
  TreeSelect,
  Select,
  Descriptions,
} from 'antd';
import { history, request } from 'umi';
import './index.less';
export default function index() {
  const columns = [
    {
      title: '所属部门',
      dataIndex: 'departentName',
      key: 'departentName',
    },
    {
      title: '岗位编号',
      dataIndex: 'jobNumber',
      key: 'jobNumber',
      width: '12%',
    },
    {
      title: '岗位名称',
      dataIndex: 'jobName',
      width: '15%',
      key: 'jobName',
    },
    {
      title: '岗位分类',
      dataIndex: 'jobIfy',
      width: '10%',
      key: 'jobIfy',
    },
    {
      title: '岗位职责',
      dataIndex: 'jobDufy',
      width: '10%',
      key: 'jobDufy',
    },
    {
      title: '岗位描述',
      dataIndex: 'introduce',
      width: '30%',
      key: 'introduce',
    },
  ];

  const [treeData, setTreedata] = useState();
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const [checkStrictly, setCheckStrictly] = useState(false);

  const [parentvalue, setparentvalue] = useState('');
  const [jobNumber, setjobNumber] = useState();
  const [jobName, setjobName] = useState();
  const [jobDufy, setjobDufy] = useState('岗位');

  // rowSelection objects indicates the need for row selection
  const onSelectChange = (newSelectedRowKeys, record) => {
    console.log(newSelectedRowKeys, record);
    // setparentvalue(record.departentName)
    // console.log(record[0].departentName);
    console.log();

    if (record.length == 1) {
      setparentvalue(record[0].departentName);
      setjobNumber(record[0].jobNumber);
      setjobName(record[0].jobName);
      setjobDufy(record[0].jobIfy);
    }

    if (record.length > 1) {
      setparentvalue(record[record.length - 1].departentName);
      setjobNumber(record[record.length - 1].jobNumber);
      setjobName(record[record.length - 1].jobName);
      setjobDufy(record[record.length - 1].jobIfy);
    }

    setSelectedRowKeys(newSelectedRowKeys);
  };
  const onSelectChangeInput = (e) => {
    setparentvalue(e);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  const handleChange = (value) => {
    setjobDufy(value);
  };
  const changeNumber = (e) => {
    setjobNumber(e.target.value);
  };

  const changeName = (e) => {
    setjobName(e.target.value);
  };
  const getDepart = async () => {
    request('/api/departPost', {
      method: 'get',
    }).then((res) => {
      // 判断管理的弹出
      console.log(res.departlist[0]);
      setTreedata(res.departlist);
    });
  };
  useEffect(() => {
    getDepart();
  }, []);

  return (
    <div className="Setparent">
      <Space
        align="center"
        style={{
          marginBottom: 16,
        }}
      >
        <Button>新增</Button>
        <Button>保存</Button>
        <Button>删除</Button>

        {/* <Switch checked={checkStrictly} onChange={setCheckStrictly} /> */}
      </Space>
      <div className="Table">
        {treeData && (
          <Table
            style={{ width: '45%' }}
            defaultExpandAllRows
            rowSelection={rowSelection}
            columns={columns}
            scroll={{
              y: 500,
              x: 1000,
            }}
            bordered
            dataSource={treeData}
            pagination={false}
          />
        )}
      </div>
      <div className="rightForm">
        <div className="formOne">
          <span>所属部门:</span>
          <TreeSelect
            showSearch
            style={{
              width: '85%',
              left: 10,
            }}
            value={parentvalue}
            dropdownStyle={{
              maxHeight: 400,
              overflow: 'auto',
            }}
            placeholder="Please select"
            allowClear
            treeDefaultExpandAll
            // onChange={onInputChange}
            onSelect={onSelectChangeInput}
            fieldNames={{ label: 'departentName', value: 'key' }}
            treeData={treeData}
          />
        </div>
        <div className="formOne">
          <span>岗位编号:</span>
          <Input
            className="formInput"
            value={jobNumber}
            onChange={(e) => changeNumber(e)}
          ></Input>
        </div>
        <div className="formOne">
          <span>岗位名称:</span>
          <Input
            className="formInput"
            value={jobName}
            onChange={(e) => changeName(e)}
          ></Input>
        </div>
        <div className="formOne">
          <span>所属类别:</span>
          <Select
            // defaultValue="岗位"
            value={jobDufy}
            style={{
              width: 565,
              left: 10,
            }}
            onChange={handleChange}
            options={[
              {
                value: '岗位',
                label: '岗位',
              },
              {
                value: '中层',
                label: '中层',
              },
              {
                value: '高层',
                label: '高层',
              },
            ]}
          />
        </div>

        <div className="formOne">
          <span style={{ position: 'absolute', top: '0' }}>岗位职责:</span>
          <Input.TextArea
            style={{
              width: '85%',
              marginLeft: '72px',
              resize: 'none',
              border: 0,
              overflowY: 'hidden',
            }}
          ></Input.TextArea>
        </div>
        <div className="formOne" style={{ marginTop: '15px' }}>
          <span style={{ position: 'absolute', top: '0' }}>职位描述:</span>
          <Input.TextArea
            style={{
              width: '85%',
              marginLeft: '72px',
              resize: 'none',
              border: 0,
              overflowY: 'hidden',
            }}
          ></Input.TextArea>
        </div>
      </div>
    </div>
  );
}
